import { Component, OnInit, HostBinding, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { MatDialog } from '@angular/material';
import { NewProjectComponent } from '../new-project/new-project.component';
import { InviteComponent } from '../invite/invite.component';
import { ConfirmComponent } from 'src/app/shared/confirm/confirm.component';
import { slideToRight } from 'src/app/animate/routing.anim';
import { listAnimation } from 'src/app/animate/list.anim';
@Component({
  selector: 'task-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.scss'],
  animations: [
    slideToRight,
    listAnimation
  ],
  changeDetection: ChangeDetectionStrategy.OnPush // 检测程序内部状态 OnPush策略
})
export class ProjectListComponent implements OnInit {
  @HostBinding('@routeAnim') state;
  projects = [
    {
      id: 1,
      'name': '企业写作平台',
      'desc': '项目描述A项目描述A项目描述A项目描述A项目描述A项目描述A',
      'coverImg': 'assets/images/img.jpg'
    },
    {
      id: 2,
      'name': '自动化测试项目',
      'desc': '自动化测试项目，这是一个企业内部项目自动化测试项目，这是一个企业内部项目',
      'coverImg': 'assets/images/img.jpg'
    },
    {
      id: 3,
      'name': '项目名称C',
      'desc': '项目描述C项目描述C项目描述C项目描述C项目描述C项目描述C项目描述C',
      'coverImg': 'assets/images/img.jpg'
    }
  ];
  constructor(private dialog: MatDialog, private cd: ChangeDetectorRef) { }

  ngOnInit() {
  }
  openNewProjectDialog() {
    // tslint:disable-next-line:max-line-length
    // this.dialog.open(NewProjectComponent, { width: '300px', height: '300px', position: { left: '30px', top: '20px' }, data: '传入的任意类型数据' });
    // this.dialog.open(NewProjectComponent, { data: '传入的任意类型数据'});
    const dialogRef = this.dialog.open(NewProjectComponent, { data: { title: '新建项目' } });
    dialogRef.afterClosed().subscribe(
      result => {
        console.log(result);
        this.projects = [...this.projects, {
          id: 4,
          'name': '项目名称D',
          'desc': '项目描述C项目描述C项目描述C项目描述C项目描述C项目描述C项目描述C',
          'coverImg': 'assets/images/img.jpg'
        }];
        this.cd.markForCheck(); // 对于聪明组件 主动告诉Angular 检测程序内部状态
      }
    );
  }
  onInviteDialog() {
    const dialogRef = this.dialog.open(InviteComponent);
    dialogRef.afterClosed().subscribe(result => console.log(result));
  }
  editProjectDialog(project) {
    const dialogRef = this.dialog.open(NewProjectComponent, { data: { title: '修改项目', project: project } });
  }
  deleteProjectDialog(project) {
    const dialogRef = this.dialog.open(ConfirmComponent, { data: { title: '删除项目', content: '确定要删除该项目吗？' } });
    dialogRef.afterClosed().subscribe(result => {
      this.projects = this.projects.filter(p => p.id !== project.id);
      console.log(project.id);
      this.cd.markForCheck(); // 主动告诉Angular 检测程序内部状态
    });
  }
}
